<template>
  <div class="prescription-container">
    <!-- 页面头部 -->
    <div class="header">
      <div class="header-content">
        <div class="hospital-icon">
          <i class="fas fa-file-prescription"></i>
        </div>
        <div class="header-text">
          <h1>电子处方下载</h1>
          <p>安全、便捷的电子处方管理</p>
        </div>
      </div>
    </div>

    <!-- 登录表单 -->
    <div class="login-section" v-if="!isLoggedIn">
      <div class="login-card">
        <div class="login-header">
          <h2>身份验证</h2>
          <p>请输入您的身份证号码查看电子处方</p>
        </div>

        <form @submit.prevent="handleLogin" class="login-form">
          <div class="form-group">
            <label for="idCard" class="form-label">
              <i class="fas fa-id-card"></i>
              身份证号码
            </label>
            <input
              type="text"
              id="idCard"
              v-model="idCardInput"
              class="form-control"
              placeholder="请输入您的身份证号码"
              required
              maxlength="18"
            >
          </div>

          <button type="submit" class="btn-login">
            <i class="fas fa-sign-in-alt"></i>
            查看处方
          </button>
        </form>

        <div class="login-tips">
          <h3><i class="fas fa-info-circle"></i> 温馨提示</h3>
          <ul>
            <li>请输入与就诊时相同的身份证号码</li>
            <li>系统将显示该身份证号码下的所有电子处方记录</li>
            <li>您的个人信息将受到严格保护</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 处方列表 -->
    <div class="prescription-section" v-else>
      <div class="section-header">
        <div class="user-info">
          <h2>我的电子处方</h2>
          <p>身份证号: {{ maskedIdCard }}</p>
        </div>
        <button class="btn-logout" @click="handleLogout">
          <i class="fas fa-sign-out-alt"></i>
          退出
        </button>
      </div>

      <!-- 搜索和筛选 -->
      <div class="filter-section">
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input
            type="text"
            v-model="searchQuery"
            placeholder="搜索医生姓名、诊断或药品..."
            class="search-input"
          >
        </div>
        <div class="filter-options">
          <select v-model="dateFilter" class="filter-select">
            <option value="all">全部时间</option>
            <option value="week">最近一周</option>
            <option value="month">最近一月</option>
            <option value="year">最近一年</option>
          </select>
        </div>
      </div>

      <!-- 处方列表 -->
      <div class="prescriptions-list" v-if="filteredPrescriptions.length > 0">
        <div
          class="prescription-card"
          v-for="prescription in filteredPrescriptions"
          :key="prescription.resId"
        >
          <div class="prescription-header">
            <div class="prescription-id">
              <i class="fas fa-prescription"></i>
              处方号: {{ prescription.resId }}
            </div>
            <div class="prescription-date">
              开具时间: {{ formatDate(prescription.createTime) }}
            </div>
          </div>

          <div class="prescription-body">
            <div class="prescription-info">
              <div class="info-row">
                <div class="info-label">诊断:</div>
                <div class="info-value">{{ prescription.description }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">医生:</div>
                <div class="info-value">{{ prescription.doctor }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">科室:</div>
                <div class="info-value">{{ prescription.department }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">发药时间:</div>
                <div class="info-value">{{ prescription.distributeTime ? formatDate(prescription.distributeTime) : '未发药' }}</div>
              </div>
            </div>

            <div class="prescription-actions">
              <button
                class="btn-view"
                @click="viewPrescriptionDetails(prescription)"
              >
                <i class="fas fa-eye"></i>
                查看详情
              </button>
              <button
                class="btn-download"
                @click="downloadPrescription(prescription)"
              >
                <i class="fas fa-download"></i>
                下载处方
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" v-else>
        <div class="empty-icon">
          <i class="fas fa-file-medical"></i>
        </div>
        <h3>暂无电子处方记录</h3>
        <p>您当前没有可查看的电子处方</p>
      </div>
    </div>

    <!-- 处方详情弹窗 -->
    <div class="modal-overlay" v-if="showPrescriptionDetails">
      <div class="modal-content prescription-modal">
        <div class="modal-header">
          <h2 class="modal-title">电子处方详情</h2>
          <button type="button" class="btn-close" @click="showPrescriptionDetails = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="prescription-details" v-if="selectedPrescription">
            <!-- 患者基本信息 -->
            <div class="detail-section patient-info">
              <h3>患者基本信息</h3>
              <div class="patient-details">
                <div class="detail-grid">
                  <div class="detail-item">
                    <div class="detail-label">姓名:</div>
                    <div class="detail-value">{{ selectedPrescription.name }}</div>
                  </div>
                  <div class="detail-item">
                    <div class="detail-label">性别:</div>
                    <div class="detail-value">{{ getGenderFromIdCard(selectedPrescription.identity) }}</div>
                  </div>
                  <div class="detail-item">
                    <div class="detail-label">年龄:</div>
                    <div class="detail-value">{{ getAgeFromIdCard(selectedPrescription.identity) }}岁</div>
                  </div>
                  <div class="detail-item">
                    <div class="detail-label">身份证号:</div>
                    <div class="detail-value">{{ maskedIdCard }}</div>
                  </div>
                </div>
                <div class="avatar-placeholder">
                  <i class="fas fa-user-circle"></i>
                  <span>患者头像</span>
                </div>
              </div>
            </div>

            <!-- 医生信息 -->
            <div class="detail-section doctor-info">
              <h3>医生信息</h3>
              <div class="doctor-details">
                <div class="doctor-name">
                  <i class="fas fa-user-md"></i>
                  {{ selectedPrescription.doctor }} 医生
                </div>
                <div class="doctor-department">
                  {{ selectedPrescription.department }}
                </div>
                <div class="prescription-dates">
                  <div class="prescription-date">
                    开具时间: {{ formatDate(selectedPrescription.createTime) }}
                  </div>
                  <div class="prescription-date" v-if="selectedPrescription.distributeTime">
                    发药时间: {{ formatDate(selectedPrescription.distributeTime) }}
                  </div>
                  <div class="prescription-date" v-else>
                    发药时间: 未发药
                  </div>
                </div>
              </div>
            </div>

            <!-- 病情说明 -->
            <div class="detail-section diagnosis-info">
              <h3>病情说明</h3>
              <div class="diagnosis-content">
                <p>{{ selectedPrescription.description }}</p>
                <div class="symptoms" v-if="selectedPrescription.symptoms">
                  <h4>主要症状:</h4>
                  <ul>
                    <li v-for="(symptom, index) in selectedPrescription.symptoms.split(',')" :key="index">
                      {{ symptom }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- 药品清单 -->
            <div class="detail-section medicines-info">
              <h3>药品清单</h3>
              <div class="medicines-table">
                <table>
                  <thead>
                    <tr>
                      <th>药品名称</th>
                      <th>规格</th>
                      <th>用法用量</th>
                      <th>数量</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="medicine in selectedPrescription.medicines" :key="medicine.name">
                      <td>{{ medicine.name }}</td>
                      <td>{{ medicine.specification }}</td>
                      <td>{{ medicine.usage }}</td>
                      <td>{{ medicine.quantity }}盒</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 康复建议 -->
            <div class="detail-section suggestions-info">
              <h3>康复建议</h3>
              <div class="suggestions-content">
                <div class="suggestion-category" v-if="selectedPrescription.suggestions.diet">
                  <h4><i class="fas fa-utensils"></i> 饮食建议</h4>
                  <p>{{ selectedPrescription.suggestions.diet }}</p>
                </div>
                <div class="suggestion-category" v-if="selectedPrescription.suggestions.exercise">
                  <h4><i class="fas fa-running"></i> 运动建议</h4>
                  <p>{{ selectedPrescription.suggestions.exercise }}</p>
                </div>
                <div class="suggestion-category" v-if="selectedPrescription.suggestions.sleep">
                  <h4><i class="fas fa-bed"></i> 睡眠建议</h4>
                  <p>{{ selectedPrescription.suggestions.sleep }}</p>
                </div>
                <div class="suggestion-category" v-if="selectedPrescription.suggestions.others">
                  <h4><i class="fas fa-stethoscope"></i> 主要建议</h4>
                  <p>{{ selectedPrescription.suggestions.others }}</p>
                </div>
              </div>
            </div>

            <!-- 医生签名 -->
            <div class="detail-section signature">
              <div class="signature-content">
                <div class="signature-line"></div>
                <div class="signature-text">
                  {{ selectedPrescription.doctor }} 医生签名
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn-close-modal" @click="showPrescriptionDetails = false">
            关闭
          </button>
          <button
            type="button"
            class="btn-download-modal"
            @click="downloadPrescription(selectedPrescription)"
          >
            <i class="fas fa-download"></i>
            下载处方
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import request from '@/utils/request'

// 响应式数据
const isLoggedIn = ref(false)
const idCardInput = ref('')
const searchQuery = ref('')
const dateFilter = ref('all')
const showPrescriptionDetails = ref(false)
const selectedPrescription = ref(null)

// 处方数据
const prescriptions = ref([])

// 计算属性
const maskedIdCard = computed(() => {
  if (!idCardInput.value) return ''
  return idCardInput.value.substring(0, 6) + '********' + idCardInput.value.substring(14)
})

const filteredPrescriptions = computed(() => {
  let filtered = prescriptions.value

  // 根据搜索词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(p =>
      p.doctor.toLowerCase().includes(query) ||
      p.description.toLowerCase().includes(query) ||
      p.medicines.some(m => m.name.toLowerCase().includes(query))
    )
  }

  // 根据时间筛选
  if (dateFilter.value !== 'all') {
    const now = new Date()
    let cutoffDate = new Date()

    switch (dateFilter.value) {
      case 'week':
        cutoffDate.setDate(now.getDate() - 7)
        break
      case 'month':
        cutoffDate.setMonth(now.getMonth() - 1)
        break
      case 'year':
        cutoffDate.setFullYear(now.getFullYear() - 1)
        break
    }

    filtered = filtered.filter(p => new Date(p.createTime) >= cutoffDate)
  }

  // 按时间倒序排列
  return filtered.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
})

// 获取用户处方数据的方法
const getUserPrescriptions = async (identity) => {
  try {
    const response = await request({
      url: '/system/prescription/queryAllReservations',
      method: 'post',
      data: { identity }
    })
    // 数据结构转换，将新的接口数据映射到前端组件需要的格式
    const reservations = response.data.reservationList || []
    return reservations.map(item => ({
      resId: item.reservationId,
      name: item.patientName,
      doctor: item.attendingDoctorName,
      department: item.departmentName,
      createTime: item.prescriptionCreateTime,
      distributeTime: item.medicineDistributionTime,
      description: item.prescriptionSuggestion?.prescriptionDescription || '',
      symptoms: item.prescriptionSuggestion?.patientSymptoms || '',
      identity: identity, // 添加身份证号码用于计算年龄和性别
      suggestions: {
        diet: item.prescriptionSuggestion?.dietSuggestion || '',
        exercise: item.prescriptionSuggestion?.sportsSuggestion || '',
        sleep: item.prescriptionSuggestion?.sleepSuggestion || '',
        others: item.prescriptionSuggestion?.otherCustomSuggestion || ''
      },
      medicines: item.medicineDetailList?.map(med => ({
        name: med.medicineName,
        specification: med.medicineSpecification,
        usage: med.medicineUsageMethod,
        quantity: med.medicineQuantity
      })) || []
    }))
  } catch (error) {
    console.error('获取处方数据失败:', error)
    throw error
  }
}

// 方法
const handleLogin = async () => {
  if (!idCardInput.value) {
    alert('请输入身份证号码')
    return
  }

  // 简单的身份证格式验证
  const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  if (!idCardRegex.test(idCardInput.value)) {
    alert('请输入有效的身份证号码')
    return
  }

  try {
    // 调用API获取处方数据
    const data = await getUserPrescriptions(idCardInput.value)
    if (data && data.length > 0) {
      prescriptions.value = data
      isLoggedIn.value = true
    } else {
      alert('未找到该身份证号码的处方记录')
    }
  } catch (error) {
    console.error('获取处方数据失败:', error)
    alert('获取处方数据失败，请稍后重试')
  }
}

const handleLogout = () => {
  isLoggedIn.value = false
  idCardInput.value = ''
  searchQuery.value = ''
  dateFilter.value = 'all'
  prescriptions.value = []
}

const viewPrescriptionDetails = (prescription) => {
  selectedPrescription.value = prescription
  showPrescriptionDetails.value = true
}

const downloadPrescription = (prescription) => {
  // 模拟下载功能
  alert(`开始下载处方 ${prescription.resId}`)
  // 在实际应用中，这里应该调用API下载处方PDF
}

const formatDate = (dateString) => {
  if (!dateString) return '无';

  try {
    const date = new Date(dateString);
    // 检查日期是否有效
    if (isNaN(date.getTime())) {
      return '日期格式错误';
    }

    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  } catch (error) {
    return '日期格式错误';
  }
};

// 根据身份证号码计算性别
const getGenderFromIdCard = (idCard) => {
  if (!idCard || idCard.length !== 18) return ''
  const genderCode = parseInt(idCard.substr(16, 1))
  return genderCode % 2 === 0 ? '女' : '男'
}

// 根据身份证号码计算年龄
const getAgeFromIdCard = (idCard) => {
  if (!idCard || idCard.length !== 18) return ''
  const birthYear = parseInt(idCard.substr(6, 4))
  const currentYear = new Date().getFullYear()
  return currentYear - birthYear
}

// 生命周期
onMounted(() => {
  // 页面加载时初始化
  console.log('电子处方页面已加载')
})
</script>

<style scoped>
.prescription-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

/* 头部样式 */
.header {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
}

.hospital-icon {
  font-size: 42px;
  margin-right: 20px;
}

.header-text h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-text p {
  font-size: 18px;
  margin: 0;
  opacity: 0.9;
}

/* 登录区域 */
.login-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.login-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.login-header p {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
}

.login-form {
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 25px;
}

.form-label {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #2c3e50;
}

.form-label i {
  margin-right: 10px;
  color: #3498db;
}

.form-control {
  width: 100%;
  padding: 16px 20px;
  font-size: 18px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  transition: all 0.3s;
}

.form-control:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  outline: none;
}

.btn-login {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  font-weight: 600;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-login:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.login-tips {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
}

.login-tips h3 {
  font-size: 18px;
  color: #2c3e50;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-tips ul {
  margin: 0;
  padding-left: 20px;
}

.login-tips li {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 处方区域 */
.prescription-section {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.user-info h2 {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 5px 0;
}

.user-info p {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
}

.btn-logout {
  padding: 10px 20px;
  font-size: 16px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-logout:hover {
  background: #c0392b;
}

/* 筛选区域 */
.filter-section {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
}

.search-box {
  position: relative;
  flex: 1;
}

.search-box i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #7f8c8d;
}

.search-input {
  width: 100%;
  padding: 12px 15px 12px 45px;
  font-size: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s;
}

.search-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  outline: none;
}

.filter-options {
  min-width: 150px;
}

.filter-select {
  width: 100%;
  padding: 12px 15px;
  font-size: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
}

/* 处方列表 */
.prescriptions-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.prescription-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
}

.prescription-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.prescription-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.prescription-id {
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.prescription-date {
  font-size: 14px;
  color: #7f8c8d;
}

.prescription-body {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.prescription-info {
  flex: 1;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
}

.info-label {
  min-width: 60px;
  font-weight: 600;
  color: #7f8c8d;
}

.info-value {
  color: #2c3e50;
  flex: 1;
}

.prescription-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 120px;
}

.btn-view, .btn-download {
  padding: 10px 15px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.btn-view {
  background: #3498db;
  color: white;
}

.btn-download {
  background: #2ecc71;
  color: white;
}

.btn-view:hover, .btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-view:hover {
  background: #2980b9;
}

.btn-download:hover {
  background: #27ae60;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state .empty-icon {
  font-size: 80px;
  color: #ddd;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 22px;
  color: #7f8c8d;
  margin-bottom: 15px;
}

.empty-state p {
  font-size: 16px;
  color: #95a5a6;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.prescription-modal {
  max-width: 900px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
}

.btn-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #7f8c8d;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.btn-close:hover {
  color: #2c3e50;
}

.modal-body {
  padding: 25px;
}

.modal-footer {
  padding: 20px 25px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

/* 处方详情样式 */
.prescription-details {
  padding: 10px 0;
}

.detail-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-section:last-of-type {
  border-bottom: none;
}

.detail-section h3 {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

/* 患者信息 */
.patient-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  flex: 1;
}

.detail-item {
  display: flex;
}

.detail-label {
  min-width: 80px;
  font-weight: 600;
  color: #7f8c8d;
}

.detail-value {
  color: #2c3e50;
}

.avatar-placeholder {
  width: 100px;
  height: 120px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #95a5a6;
  text-align: center;
}

.avatar-placeholder i {
  font-size: 40px;
  margin-bottom: 10px;
}

/* 医生信息 */
.doctor-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doctor-name {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 10px;
}

.doctor-department {
  color: #7f8c8d;
}

.prescription-dates {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.prescription-date {
  color: #7f8c8d;
  font-size: 14px;
}

/* 病情说明 */
.diagnosis-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #2c3e50;
  margin-bottom: 15px;
}

.symptoms h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.symptoms ul {
  margin: 0;
  padding-left: 20px;
}

.symptoms li {
  color: #7f8c8d;
  margin-bottom: 5px;
}

/* 药品清单 */
.medicines-table {
  overflow-x: auto;
}

.medicines-table table {
  width: 100%;
  border-collapse: collapse;
}

.medicines-table th,
.medicines-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.medicines-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.medicines-table tr:hover {
  background: #f8f9fa;
}

/* 康复建议 */
.suggestions-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.suggestion-category {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
}

.suggestion-category h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.suggestion-category p {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
  margin: 0;
}

/* 医生签名 */
.signature-content {
  text-align: right;
  padding-top: 20px;
}

.signature-line {
  width: 200px;
  height: 1px;
  background: #2c3e50;
  margin: 0 0 5px auto;
}

.signature-text {
  color: #7f8c8d;
  font-size: 14px;
}

/* 按钮样式 */
.btn-close-modal, .btn-download-modal {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-close-modal {
  background: #95a5a6;
  color: white;
}

.btn-download-modal {
  background: #2ecc71;
  color: white;
}

.btn-close-modal:hover, .btn-download-modal:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-close-modal:hover {
  background: #7f8c8d;
}

.btn-download-modal:hover {
  background: #27ae60;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .prescription-container {
    padding: 15px;
  }

  .header-content {
    flex-direction: column;
    text-align: center;
  }

  .hospital-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .filter-section {
    flex-direction: column;
  }

  .prescription-body {
    flex-direction: column;
  }

  .prescription-actions {
    flex-direction: row;
    width: 100%;
  }

  .btn-view, .btn-download {
    flex: 1;
  }

  .patient-details {
    flex-direction: column;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .suggestions-content {
    grid-template-columns: 1fr;
  }

  .medicines-table {
    font-size: 14px;
  }

  .medicines-table th,
  .medicines-table td {
    padding: 8px 10px;
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer button {
    width: 100%;
  }
}
</style>